<template>
  <div class="table_container">
    <!-- 定位元素  固定宽度 固定高度-->
    <div class="position_div" ref="position_div">
      <div class="table_header">
        <div
          v-for="item in column"
          :key="item.id"
          class="common_td header_td"
          :isempty="item.new"
        >
          <!-- 目标专利 -->
          <template v-if="item.target">
            目标--{{ item.left.label }}--{{ item.left.pnNumber }}
          </template>
          <!-- 对比专利 -->
          <template v-else-if="item.contrast">
            对比--{{ item.left.label }}--{{ item.left.pnNumber }}
          </template>
          <!-- 新增专利 -->
          <template v-else-if="item.new">
            新--{{ item.left.label }}--{{ item.left.pnNumber }}
          </template>
          <!-- 其他 -->
          <template v-else>
            {{ item.label }}
          </template>
        </div>
      </div>
      <div class="table_body" @scroll="handleScroll1">
        <div v-for="item in trLength" class="common_tr" :key="item">
          <div class="common_td" v-for="it in column" :key="it.id">
            <template v-if="it.basic">
              <div class="inner_td">
                <div class="common_card">{{ item }}</div>
              </div>
            </template>
            <template v-else-if="it.new">
              <div class="inner_td">
                <div class="common_card">新</div>
              </div>
            </template>
            <template v-else>
              <!-- {{tableDataMap[it.left.pnNumber][item]}} -->
              <template
                v-for="(pnItem, pnIndex) in tableDataMap[it.left.pnNumber][
                  item
                ]"
              >
                <div class="inner_td" :key="item + it.left.pnNumber + pnIndex">
                  <div class="common_card">{{ pnItem.content }}</div>
                </div>
                <div
                  class="merge"
                  :key="pnIndex + 'merge'"
                  v-if="
                    pnIndex != tableDataMap[it.left.pnNumber][item].length - 1
                  "
                ></div>
              </template>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!-- 除了定位的图表数据 -->

    <div class="singTable" ref="singTable">
      <div class="table_header">
        <div
          v-for="item in column"
          :key="item.id"
          class="common_td header_td"
          :isempty="item.new"
        >
          <!-- 目标专利 -->
          <template v-if="item.target">
            目标--{{ item.left.label }}--{{ item.left.pnNumber }}
          </template>
          <!-- 对比专利 -->
          <template v-else-if="item.contrast">
            对比--{{ item.left.label }}--{{ item.left.pnNumber }}
          </template>
          <!-- 新增专利 -->
          <template v-else-if="item.new">
            新--{{ item.left.label }}--{{ item.left.pnNumber }}
          </template>
          <!-- 其他 -->
          <template v-else>
            {{ item.label }}
          </template>
        </div>
      </div>
      <div class="table_body" @scroll="handleScroll">
        <div v-for="item in trLength" class="common_tr" :key="item">
          <div class="common_td" v-for="it in column" :key="it.id">
            <template v-if="it.basic">
              <div class="inner_td">
                <div class="common_card">{{ item }}</div>
              </div>
            </template>
            <template v-else-if="it.new">
              <div class="inner_td">
                <div class="common_card">新</div>
              </div>
            </template>
            <template v-else>
              <!-- {{tableDataMap[it.left.pnNumber][item]}} -->
              <template
                v-for="(pnItem, pnIndex) in tableDataMap[it.left.pnNumber][
                  item
                ]"
              >
                <div class="inner_td" :key="item + it.left.pnNumber + pnIndex">
                  <div class="common_card">{{ pnItem.content }}</div>
                </div>
                <div
                  class="merge"
                  :key="pnIndex + 'merge'"
                  v-if="
                    pnIndex != tableDataMap[it.left.pnNumber][item].length - 1
                  "
                ></div>
              </template>
            </template>
          </div>
        </div>
        <!-- <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">王五</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card" @click="ceshi">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">王五</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">王五</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李留</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">王五</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">王五</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">王五</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
          </div>
        </div>
        <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
        </div>
        <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
        </div>
        <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
        </div>
        <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
        </div>
        <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
        </div>
        <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
        </div>
        <div class="common_tr">
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">1</div>
            </div>
          </div>
          <div class="common_td">
            <div class="inner_td">
              <div class="common_card">张三</div>
            </div>
            <div class="merge"></div>
            <div class="inner_td">
              <div class="common_card">李四</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <el-button @click="addNew"> 测试</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      column: [
        { label: "权利要求", width: "200px", id: 1, basic: true },
        {
          target: true,
          id: 2,
          left: {
            label: "目标专利",
            pnNumber: "1",
          },
          right: {
            label: "申请日",
            pnNumber: "2010.04.22",
          },
        },
        {
          contrast: true,
          id: 3,
          left: {
            label: "对比专利",
            pnNumber: "2",
          },
          right: {
            label: "申请日",
            pnNumber: "2010.04.22",
          },
        },
        {
          contrast: true,
          id: 4,
          left: {
            label: "对比专利",
            pnNumber: "3",
          },
          right: {
            label: "申请日",
            pnNumber: "2010.04.22",
          },
        },
        {
          contrast: true,
          id: 5,
          left: {
            label: "对比专利",
            pnNumber: "4",
          },
          right: {
            label: "申请日",
            pnNumber: "2010.04.22",
          },
        },
        {
          contrast: true,
          id: 6,
          left: {
            label: "对比专利",
            pnNumber: "5",
          },
          right: {
            label: "申请日",
            pnNumber: "2010.04.22",
          },
        },
        {
          contrast: true,
          id: 7,
          left: {
            label: "对比专利",
            pnNumber: "6",
          },
          right: {
            label: "申请日",
            pnNumber: "2010.04.22",
          },
        },
        // {
        //   new: true,
        //   id: 8,
        //   left: {
        //     label: "新的专利",
        //     pnNumber: "7",
        //   },
        //   right: {
        //     label: "申请日",
        //     pnNumber: "2010.04.22",
        //   },
        // },
      ],
      tableDataMap: {
        1: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          2: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
        2: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            // {
            //   content:
            //     "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
            //   trans: "翻译",
            // },
          ],
          2: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
        3: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          2: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
        4: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          2: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
        5: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          2: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
        6: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          2: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
        7: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          2: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
        8: {
          1: [
            { content: "一种钢球自动压装装置", trans: "翻译" },
            {
              content:
                "所述钢球压装机构(4)包括压装机架(41)、待压定位板(44)待压定位板(44)",
              trans: "翻译",
            },
          ],
          2: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
          3: [{ content: "一种钢球自动压装装置", trans: "翻译" }],
        },
      },
      trLength: 3, //长度是固定的
      observer: null,
      callback: {
        // childList: true, // 观察目标子节点的变化，是否有添加或者删除
        attributes: true, // 观察属性变动
        attributeFilter: ["isempty"],
        subtree: true, // 观察后代节点，默认为 false
      },
      emptyDom: true,
      index: 0,
    };
  },
  async mounted() {
    // this.observer = new MutationObserver((mutations) => {
    //   mutations.forEach((mutation) => {
    //     if (mutation.type === "attributes") {
    //       console.log(mutation.target);
    //       this.setNewEmpty(mutation.target);
    //     }
    //   });
    // });
    // let singTable = this.$refs.singTable.querySelector(".table_header");
    // this.observer.observe(singTable, this.callback);
  },
  methods: {
    async addNew() {
      this.column.push({
        new: true,
        id: 8,
        left: {
          label: "新的专利",
          pnNumber: "7",
        },
        right: {
          label: "申请日",
          pnNumber: "2010.04.22",
        },
      });
      await this.$nextTick();
      //删除所有的
      let emptyList = this.$refs.singTable.querySelectorAll(".emptyDom");
      emptyList.forEach((item) => {
        item.remove();
      });
      //重新创建空的dom
      let domList = this.$refs.singTable.querySelectorAll("[isempty='true']");
      domList.forEach((item) => {
        this.addEmptyDom(item);
      });
    },
    ceshi1() {
      console.log(22222);
      this.emptyDom = !this.emptyDom;
    },
    ceshi() {
      console.log(11111);
    },

    async addEmptyDom(dom, name) {
      await this.$nextTick();
      let div = document.createElement("div");
      let table_body = document.querySelector(".singTable .table_body");
      div.classList.add("emptyDom");
      div.setStyle({
        width: table_body.scrollWidth + "px",
        height: table_body.scrollHeight + "px",
        position: "absolute",
        left: 0,
        top: 0,
        pointerEvents: "none",
        overflow: "hidden",
      });
      let empty = document.createElement("div");
      empty.innerHTML = `<div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>`;
      empty.setStyle({
        width: "400px",
        height: "100%",
        position: "absolute",
        left: dom.offsetLeft + "px",
        top: 0,
        pointerEvents: "auto",
        background: "red",
      });
      div.appendChild(empty);
      table_body.appendChild(div);
    },
    handleScroll() {
      let target = this.$refs.singTable.querySelector(".table_body");
      let follow = this.$refs.position_div.querySelector(".table_body");
      let header = this.$refs.singTable.querySelector(".table_header");
      follow.scrollTop = target.scrollTop;
      header.scrollLeft = target.scrollLeft;
    },
    handleScroll1() {
      let target = this.$refs.position_div.querySelector(".table_body");
      let follow = this.$refs.singTable.querySelector(".table_body");
      follow.scrollTop = target.scrollTop;
    },
  },
};
</script>
<style scoped lang="less">
div {
  box-sizing: border-box;
}
.table_container {
  position: relative;
  width: 100%;
  height: 100%;
}
.singTable,
.position_div {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.common_td {
  min-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  &:nth-last-of-type(1) {
    border-right: none;
  }
  &:nth-of-type(1) {
    width: 200px;
  }
  &:nth-of-type(n + 2) {
    width: 400px;
  }
}
.table_header {
  display: flex;
  overflow: auto;
  flex-shrink: 0;
  padding-right: 8px;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .header_td {
    padding: 10px 5px;
    font-weight: 600;
    font-size: 12px;
    color: #626262;
    line-height: 20px;
  }
}
.table_body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.common_tr {
  display: flex;
  .inner_td {
    width: 100%;
    height: 100%;

    &:nth-last-of-type(1) {
      padding-bottom: 8px;
    }
    .common_card {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 4px;
      background-color: #fff;
      padding: 16px;
      font-size: 14px;
      color: #181818;
      line-height: 22px;
      &:hover {
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.16);
        border-radius: 4px;
      }
    }
  }
  .merge {
    opacity: 0.5;
    width: 100%;
    height: 8px;
    cursor: pointer;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
// 定位
.position_div {
  position: absolute;
  left: 0;
  top: 0;
  overflow-x: auto;
  overflow-y: auto;
  width: 600px;
  max-height: calc(100% - 8px);
  z-index: 10;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.singTable {
  background-color: #f5deb3;
  .table_header {
    .header_td {
      background-color: #f5deb3;
    }
    & > div:nth-of-type(-n + 2) {
      visibility: hidden;
    }
  }
  .table_body {
    position: relative;
    & .common_tr:nth-of-type(n + 1) .common_td:nth-of-type(1) {
      visibility: hidden;
    }
    & .common_tr:nth-of-type(n + 1) .common_td:nth-of-type(2) {
      visibility: hidden;
    }
  }
}
.position_div {
  .table_header {
    pointer-events: none;
    .common_td:nth-of-type(-n + 2) {
      background-color: #f5deb3;
      pointer-events: auto;
    }
    .common_td:nth-of-type(n + 3) {
      visibility: hidden;
    }
  }
  .table_body {
    pointer-events: none;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .common_tr .common_td:nth-of-type(-n + 2) {
      background-color: #f5deb3;
      pointer-events: auto;
    }
    .common_tr .common_td:nth-of-type(n + 3) {
      visibility: hidden;
    }
  }
}
</style>
